<template>
	<view class="">
		<mescroll-uni @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="u-p-30">
				<view class="u-m-b-30 bank-item" :style="{backgroundImage:`url(${item.bank_icon})`}"
					v-for="(item,index) in bankList" :key="index">
					<view class="u-flex">
						<image :src="item.bank_icon" mode="aspectFit" style="width: 60rpx;height: 60rpx;"></image>
						<view class="u-flex-1 u-m-l-18">
							<text class="u-font-32">{{item.bank_name}}</text>
							<text class="u-light-color u-m-l-30">{{item.bank_type}}</text>
						</view>
						<view class="" @click="deleteHandle(item.id)">
							<u-icon name="trash" size="44"></u-icon>
						</view>
					</view>
					<view class="font-medium u-font-36" style="margin-left: 78rpx;">
						{{item.bank_code}}
					</view>
				</view>
			</view>
		</mescroll-uni>
		<view class="add-btn">
			<u-button type="primary" shape="circle" hover-class="none"
				@click="$u.route('/pages/subpage/wallet/addCard')">添加银行卡</u-button>
		</view>
		<u-modal v-model="delModal" @confirm="defConfrim" ref="delModal" :async-close="true" content="确定删除该银行卡？"
			show-cancel-button :confirm-color="$appConfig.mainColor" z-index="9999"></u-modal>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				bankList: [],
				delModal: false,
				currentId: ''
			}
		},
		onLoad() {

		},
		onShow() {
			if (this.needRefresh) {
				this.mescroll.resetUpScroll()
			}
			this.needRefresh = true
		},
		methods: {
			upCallback(page) {
				this.$u.api.bankList({
					type: 'bank',
					page: page.num,
					limit: page.size
				}).then(res => {
					this.bankList = page.num == 1 ? res : [...this.bankList, ...res]
					this.mescroll.endSuccess(res.length, res.length >= page.size);
				})
			},
			deleteHandle(id) {
				this.currentId = id;
				this.delModal = true
			},
			defConfrim() {
				this.$u.api.delBankCard(this.currentId).then(res => {
					this.$u.toast('删除成功！')
					this.delModal = false
					this.mescroll.resetUpScroll()
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.bank-item {
		background-color: #fff;
		border-radius: 20rpx;
		background-repeat: no-repeat;
		background-position: top right;
		background-size: 0;
		position: relative;
		padding: 28rpx 40rpx;

		&:before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: inherit;
			background-repeat: no-repeat;
			background-position: 100% -40rpx;
			background-size: 40%;
			filter: brightness(0.8) grayscale(1);
			opacity: 0.1;
		}
	}

	.add-btn {
		position: fixed;
		width: 100%;
		padding: 0 30rpx;
		left: 0;
		bottom: 80rpx;
		z-index: 99;
	}
</style>